<template>
	<!--
		poap 重大事件组件
		使用父级需开启弹性布局
	 -->
	<view class="poap_card" @tap="goTonftSpace">
		<!-- 图片 -->
		<view class="logo">
			<image :src="item.imgSrc" mode=""></image>
		</view>
		<!-- 标题 -->
		<view class="title">{{item.title}}</view>
		<!-- 顺序 -->
		<!-- <view class="order">{{item.order}}</view> -->
		<!-- 描述 -->
		<view class="description">{{item.description}}</view>
	</view>
</template>
<script>
	export default {
		options: {
			// 微信小程序中 options 选项
			multipleSlots: true, //  在组件定义时的选项中启动多slot支持，默认启用
			styleIsolation: "isolated", //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
			addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
			virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
		},
		data() {
			return {

			}
		},
		props: {
			item: {
				type: Object
			},
		},
		methods: {
			goTonftSpace() {
				uni.navigateTo({
					url: "/pages/nft/nftSpace"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.poap_card {
		width: 40%;
		height: 460rpx;
		text-align: center;
		overflow: hidden;

		.logo {
			margin: 0 auto;
			height: 160rpx;
			width: 160rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			font-size: $echo-font-size-title;
			color: $echo-main-color;
			margin: 16rpx 0;
			@include text-ellipsis(2);
		}

		.order {
			font-size: $echo-font-size-conent;
			color: #666;
		}

		.description {
			margin: 16rpx 0;
			color: #666;
			@include text-ellipsis(4);
		}
	}
</style>
